<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{$session.title}</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <style>
        .exam-container {
            max-width: 1000px;
            margin: 20px auto;
            padding: 20px;
            background: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .exam-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        .exam-title {
            font-size: 24px;
            font-weight: bold;
        }
        .timer {
            font-size: 18px;
            color: #e74c3c;
            font-weight: bold;
        }
        .question-item {
            margin-bottom: 30px;
            padding: 15px;
            border: 1px solid #eee;
            border-radius: 4px;
        }
        .question-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #333;
        }
        .question-image {
            margin: 10px 0;
            max-width: 100%;
        }
        .options-item {
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }
        .option-image {
            margin-left: 10px;
            max-width: 200px;
        }
        .submit-btn {
            margin-top: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="exam-container">
        <div class="exam-header">
            <div class="exam-title">{$session.title}</div>
            {if $session.mode == 1}
            <div class="timer" id="timer">剩余时间: <span id="time">00:00:00</span></div>
            {/if}
        </div>
        
        <form class="layui-form" id="examForm">
            <input type="hidden" name="record_id" value="{$record.id}">
            
            {volist name="questions" id="question" key="index"}
            <div class="question-item">
                <div class="question-title">
                    <span class="question-type">
                        {switch $question.type}
                            {case 1}填空{/case}
                            {case 2}单选{/case}
                            {case 3}多选{/case}
                            {case 4}判断{/case}
                            {case 5}简答{/case}
                        {/switch}
                    </span>
                    {$index}. {$question.content}
                </div>
                
                <!-- 题目图片 -->
                {if !empty($question.images)}
                <div class="question-image">
                    {volist name="question.images" id="image"}
                    {if $image.type == 1}
                    <img src="{$image.url}" style="max-width: 100%;">
                    {/if}
                    {/volist}
                </div>
                {/if}
                
                <div class="question-options">
                    {switch $question.type}
                        {case 1} <!-- 填空 -->
                            <div class="layui-form-item">
                                <div class="layui-input-inline">
                                    <input type="text" name="answers[{$question.id}]" placeholder="请输入答案" class="layui-input">
                                </div>
                            </div>
                        {/case}
                        
                        {case 2} {case 3} <!-- 单选/多选 -->
                            {php}$options = json_decode($question['options'], true);{/php}
                            {volist name="options" id="option" key="key"}
                            <div class="options-item">
                                {if $question.type == 2}
                                <input type="radio" name="answers[{$question.id}]" value="{$key}" title="{$key}">
                                {else}
                                <input type="checkbox" name="answers[{$question.id}][]" value="{$key}" title="{$key}">
                                {/if}
                                <div class="option-text">{$option}</div>
                                <!-- 选项图片 -->
                                {if !empty($question.option_images[$key])}
                                <div class="option-image">
                                    <img src="{$question.option_images[$key]}" style="max-height: 100px;">
                                </div>
                                {/if}
                            </div>
                            {/volist}
                        {/case}
                        
                        {case 4} <!-- 判断 -->
                            <div class="options-item">
                                <input type="radio" name="answers[{$question.id}]" value="1" title="正确">
                            </div>
                            <div class="options-item">
                                <input type="radio" name="answers[{$question.id}]" value="0" title="错误">
                            </div>
                        {/case}
                        
                        {case 5} <!-- 简答 -->
                            <div class="layui-form-item">
                                <textarea name="answers[{$question.id}]" placeholder="请输入答案" class="layui-textarea"></textarea>
                            </div>
                        {/case}
                    {/switch}
                </div>
            </div>
            {/volist}
            
            <div class="submit-btn">
                {if $session.mode == 1} <!-- 考试模式 -->
                    <button type="button" class="layui-btn layui-btn-lg" lay-submit lay-filter="submitExam">提交试卷</button>
                {else /} <!-- 练习模式 -->
                    <button type="button" class="layui-btn" id="prevBtn">上一题</button>
                    <button type="button" class="layui-btn" id="nextBtn">下一题</button>
                {/if}
            </div>
        </form>
    </div>

    <script src="/static/layui/layui.js"></script>
    <script>
        layui.use(['form', 'layer'], function(){
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.$;
            
            // 考试倒计时
            {if $session.mode == 1}
            var duration = {$session.duration} * 60; // 转换为秒
            var timer = setInterval(function() {
                duration--;
                if (duration <= 0) {
                    clearInterval(timer);
                    submitExam();
                    return;
                }
                
                var hours = Math.floor(duration / 3600);
                var minutes = Math.floor((duration % 3600) / 60);
                var seconds = duration % 60;
                
                $('#time').text(
                    (hours < 10 ? '0' + hours : hours) + ':' +
                    (minutes < 10 ? '0' + minutes : minutes) + ':' +
                    (seconds < 10 ? '0' + seconds : seconds)
                );
            }, 1000);
            {/if}
            
            // 考试模式提交试卷
            form.on('submit(submitExam)', function(){
                submitExam();
                return false;
            });
            
            function submitExam() {
                layer.confirm('确定要提交试卷吗？提交后无法修改', function(index){
                    $.post('/exam/submit', $('#examForm').serialize(), function(res){
                        if(res.code === 0){
                            layer.msg('提交成功！得分：' + res.total_score);
                            setTimeout(function(){
                                window.location.href = '/exam/result?id={$record.id}';
                            }, 2000);
                        } else {
                            layer.msg('提交失败：' + res.msg);
                        }
                    });
                });
            }
            
            // 练习模式提交单题
            var currentIndex = 1;
            var totalQuestions = {$questions|count};
            
            $('#nextBtn').click(function(){
                if (currentIndex < totalQuestions) {
                    submitCurrentQuestion();
                    currentIndex++;
                    $('.question-item').hide();
                    $('.question-item:nth-child(' + currentIndex + ')').show();
                    $('#prevBtn').show();
                } else {
                    submitCurrentQuestion();
                    layer.confirm('已完成所有题目，是否提交试卷？', function(){
                        submitExam();
                    });
                }
            });
            
            $('#prevBtn').click(function(){
                if (currentIndex > 1) {
                    currentIndex--;
                    $('.question-item').hide();
                    $('.question-item:nth-child(' + currentIndex + ')').show();
                    if (currentIndex === 1) {
                        $('#prevBtn').hide();
                    }
                }
            });
            
            function submitCurrentQuestion() {
                var questionId = $('.question-item:visible').data('question-id');
                var answer = getAnswer(questionId);
                
                if (!answer) {
                    layer.msg('请先回答本题');
                    return;
                }
                
                $.post('/exam/submitQuestion', {
                    record_id: $('input[name="record_id"]').val(),
                    question_id: questionId,
                    answer: answer
                }, function(res) {
                    if (res.code === 0) {
                        // 显示答题结果
                        layer.msg(res.is_correct ? '回答正确！' : '回答错误！');
                    } else {
                        layer.msg('提交失败：' + res.msg);
                    }
                });
            }
            
            function getAnswer(questionId) {
                var type = $('.question-item:visible').find('.question-type').text().trim();
                var answer;
                
                if (type === '填空' || type === '简答') {
                    answer = $('.question-item:visible').find('input, textarea').val();
                } else if (type === '单选' || type === '判断') {
                    answer = $('.question-item:visible').find('input:checked').val();
                } else if (type === '多选') {
                    answer = [];
                    $('.question-item:visible').find('input:checked').each(function() {
                        answer.push($(this).val());
                    });
                }
                
                return answer;
            }
            
            // 初始化显示第一题
            $('.question-item:gt(0)').hide();
            $('#prevBtn').hide();
        });
    </script>
</body>
</html>